<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>菜单列表</title>
    <link rel="stylesheet" th:href="@{/src/css/layui.css}">
</head>
<body>
<br />
<div class="layui-btn-group TableTools" style="margin-left: 10px">
        <button class="layui-btn layui-btn-disabled" shiro:lacksPermission="sys:menu:save">添加菜单</button>
        <button class="layui-btn" id="addMenu" shiro:hasPermission="sys:menu:save">添加菜单</button>
        <button class="layui-btn layui-btn-disabled" shiro:lacksPermission="sys:menu:update">编辑菜单</button>
        <button class="layui-btn" id="editMenu" shiro:hasPermission="sys:menu:update">编辑菜单</button>
        <button class="layui-btn layui-btn-danger layui-btn-disabled" shiro:lacksPermission="sys:menu:delete">删除菜单</button>
        <button class="layui-btn layui-btn-danger" id="delMenu" shiro:hasPermission="sys:menu:delete">删除菜单</button>
    <button class="layui-btn layui-btn-primary">（不选中为添加顶级菜单，选中添加子菜单）</button>
</div>
<div>
    <table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
</div>
<script th:src="@{/src/layui.js}"></script>
<script type="text/html" id="iconTpl">
        {{# if(d.icon){ }}
            <i class="layui-icon">{{d.icon}}</i>
        {{# } }}
</script>
<script>
    layui.config({
        base:'/src/app/'
    }).use(['treeGrid','jquery','layer'],function () {
           var treeGrid = layui.treeGrid,
               $ = layui.jquery,
               layer = layui.layer;
           treeGrid.render({
               id:'tg',
               elem:'#treeTable',
               url:'/menu/loadMenus',
               page:false,
               cellMinWidth:80,
               treeId:'menuId',
               treeUpId:'parentId',
               treeShowName:'title',
               cols:[
                   [
                       {type:'checkbox'},
                       {field:'title',title:'菜单名',width:200},
                       {field:'icon',title:'图标',width:200,templet:'#iconTpl'},
                       {field:'href',title:'链接',width:200},
                       {field:'perms',title:'权限标识',width:200},
                       {field:'sorting',title:'排序',event:'sorting',width:200,style:'cursor:pointer'}
                   ]
               ]
           })


        $("#addMenu").click(function () {
                var checkStatus = treeGrid.checkStatus("tg");
                var data = checkStatus.data; //选中节点的数据
                if(data.length>1){
                    layer.msg('只能选中一个阶段',{icon:5});
                    return ;
                }
                var parentId ;
                if(data != ''){
                    parentId = data[0].menuId; //选中节点的menuId属性的值
                }
                parentId = parentId==undefined?0:parentId;

                layer.open({
                    type:2,
                    title:'添加菜单',
                    area:['500px','500px'],
                    content:'/menu/addMenu/'+parentId
                })
        })
        $("#editMenu").click(function () {
                var checkStatus = treeGrid.checkStatus("tg");
                var data = checkStatus.data; //选中节点的数据
                if(data.length>1){
                    layer.msg('只能选中一个阶段',{icon:5});
                    return ;
                }
                var menuId ;
                if(data != ''){
                    menuId = data[0].menuId; //选中节点的menuId属性的值
                }else {
                    layer.msg('请选择一个阶段编辑',{icon:5});
                    return ;
                }

                layer.open({
                    type:2,
                    title:'添加菜单',
                    area:['500px','500px'],
                    content:'/menu/toEditMenu/'+menuId
                })
        })
    //监听行工具事件
        treeGrid.on("tool(treeTable)",function (row) {
            if(row.event === "sorting"){
               layer.prompt({
                   formType:2,
                   area: ['300px', '350px'] ,//自定义文本域宽高
                   title: '修改ID为['+row.data.menuId+"]的排序"
               },function (value, index, elem) {//确定后的回调函数
                    if(value != row.data.sorting){
                        $.ajax({
                            url:'/menu/updateMenuSorting',
                            data:{menuId:row.data.menuId,sorting:value},
                            type:'put',
                            dataType:'json',
                            success:function (res) {
                                if(res.code == 200){
                                    layer.msg('更新成功',{icon:1,time:1000},function () {
                                        treeGrid.reload("tg",{});
                                    });
                                }else{
                                    layer.msg('更新失败',{icon:5})
                                }
                            }
                        })
                    }
                   layer.close(index);
               })
            }
        })

        //删除
        $("#delMenu").click(function () {
            var checkStatus = treeGrid.checkStatus('tg');
            var data = checkStatus.data;
            if(data.length != 1){
                layer.msg('只能选择一个节点进行删除',{icon:5});
                return false;
            }

            $.ajax({
                url:'/menu/delete/'+data[0].menuId,
                type:'delete',
                dataType:"json",
                success:function (res) {
                    if(res.code == 200){
                        layer.msg('删除成功',{icon:1},function () {
                            treeGrid.reload("tg");
                        })
                    }else{
                        layer.msg(res.message,{icon:5});
                    }
                }

            });
        })

    })

</script>
</body>
</html>